import 'package:flutter/material.dart';

class GridViewDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      appBar: AppBar(title: Text('GridViewDemo'),),

      body: Column(

        children: <Widget>[

          RaisedButton(onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (c) {
              return GridDelegateCount();
            }));
          }, child: Text('MaxCount'),),

          RaisedButton(onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (c) {
              return GridViewCount();
            }));
          }, child: Text('GridView Count'),),


          RaisedButton(onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (c) {
              return GridDelegateWith();
            }));
          }, child: Text('MaxWith'),),


          RaisedButton(onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (c) {
              return GridViewExtent();
            }));
          }, child: Text('GridView extent'),),


          RaisedButton(onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (c) {
              return GridViewBuilder();
            }));
          }, child: Text('GridView builder'),),

        ],

      ),
    );
  }
}









///固定子组件在横轴上的个数
class GridDelegateCount extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(

        appBar: AppBar(title: Text('默认的GridView'),),

        body: GridView(

          //Sliver 薄片； Delegate 代表 ；Fixed 固定的；Cross交叉；Axis 轴
          //固定横轴计数的条子网格代理
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

            crossAxisCount: 3, //横轴子元素的数量，此属性确定后
            childAspectRatio: 1, //纵横比
            mainAxisSpacing: 5, //间距
            crossAxisSpacing: 5, //间距

          ),

          children: <Widget>[

            Container(color: Colors.grey,),
            Container(color: Colors.green,),
            Container(color: Colors.greenAccent,),
            Container(color: Colors.blueGrey,),
            Container(color: Colors.orange,),
            Container(color: Colors.deepOrange,),
          ],
        )
    );
  }
}


///GridView.count 构造函数内部使用了 SliverGridDelegateWithFixedCrossAxisCount 相当于上面的写法
class GridViewCount extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return Scaffold(

      appBar: AppBar(title: Text('带count的GridView'),),

      body: GridView.count(

        crossAxisCount: 3,
        childAspectRatio: 1.0,
        mainAxisSpacing: 5,
        crossAxisSpacing: 5,


        children: <Widget>[

          Container(color: Colors.grey,),
          Container(color: Colors.green,),
          Container(color: Colors.greenAccent,),
          Container(color: Colors.blueGrey,),
          Container(color: Colors.orange,),
          Container(color: Colors.deepOrange,),

        ],

      ),
    );
  }
}



///固定子组件在横轴上的最大宽度
class GridDelegateWith extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      appBar: AppBar(title: Text('子元素的最大宽度'),),

      body: GridView(
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 100, childAspectRatio: 1),

        children: <Widget>[

          Container(color: Colors.grey,),
          Container(color: Colors.green,),
          Container(color: Colors.greenAccent,),
          Container(color: Colors.blueGrey,),
          Container(color: Colors.orange,),
          Container(color: Colors.deepOrange,),
        ],
      ),
    );
  }
}

///构造函数内部使用了SliverGridDelegateWithMaxCrossAxisExtent 可以快速的创建纵轴子元素为固定最大长度的的GridView 等于上面的代码
class GridViewExtent extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(

      appBar: AppBar(title: Text('GridView extent'),),

      body: GridView.extent(

        maxCrossAxisExtent: 100,
        childAspectRatio: 1.0,
        children: <Widget>[

          Container(color: Colors.grey,),
          Container(color: Colors.green,),
          Container(color: Colors.greenAccent,),
          Container(color: Colors.blueGrey,),
          Container(color: Colors.orange,),
          Container(color: Colors.deepOrange,),
        ],

      ),
    );
  }
}


///使用builder 拥有复用
class GridViewBuilder extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {

    return GridViewBuilderState();
  }
}

class GridViewBuilderState extends State{

  List<IconData> _icons = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _retrieveIcons();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('GridView builder'),),

      body: GridView.builder(

          physics: BouncingScrollPhysics(),

          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,childAspectRatio: 1),
          itemCount: _icons.length,
          itemBuilder: (context,index){

            if(index == _icons.length -1 && _icons.length < 50){

              _retrieveIcons();
            }

            return Icon(_icons[index]);
          }

      ),

    );
  }

  void _retrieveIcons(){

    Future.delayed(Duration(milliseconds: 200)).then((e){

      setState(() {

        _icons.addAll(

           [
             Icons.ac_unit,
             Icons.airport_shuttle,
             Icons.all_inclusive,
             Icons.beach_access,
             Icons.cake,
             Icons.free_breakfast
           ]
        );

      });

    });
  }
}

